<div ...attributes>
  <ErrorMessages @model={{this.model}} />

  <form {{on "submit" this.submitForm}}>
    <FieldsFor @model={{this.model}} @style="horizontal" as |f|>
      <fieldset class="form-horizontal condensed">
        {{f.text-field "frontendHost" label="Frontend Host" placeholder="example.com"}}
        {{f.select-field "backendProtocol" label=(t "Backend Protocol") options=this.backendProtocolOptions}}
        {{f.text-field "serverHost" label="Backend Server" placeholder="example.github.io"}}
        {{f.text-field "serverPort" label="Backend Port"}}
      </fieldset>

      <div class="row">
        <div class="col-sm-6">
          <button type="submit" class="btn btn-lg btn-primary save-button"><span class="btn-label">Save</span><span class="btn-loading-label"><FaIcon @icon="sync-alt" @spin={{true}} />Saving...</span></button>
        </div>
        <div class="col-sm-6 record-details">
          {{#if this.model.id}}
            Created: {{format-date this.model.createdAt}} by {{this.model.creator.username}}<br>
            Last Updated: {{format-date this.model.updatedAt}} by {{this.model.updater.username}}<br>
          {{/if}}
        </div>
      </div>
      {{#if this.model.id}}
        <div class="form-extra-actions">
          <a href="#" class="remove-action" {{action "delete"}}><FaIcon @icon="times" />Delete Website Backend</a>
        </div>
      {{/if}}
    </FieldsFor>
  </form>
</div>